<template>
    <div class="system-menu-container">
        <ProTable :table-options="tableOptions" :show-page="false"  v-model:search="search" :data="tableData" @search="handleSearch" @init="handleInit" @row-click="handleRowClick" @select="handleSelect" row-key="name">
            <template #tableBtn>
                <el-button type="primary">新增</el-button>
                <el-button type="danger">删除</el-button>
                <el-button>导出</el-button>
            </template>
            <template #opt="{row}">
                <el-button text size="small" type="primary">编辑</el-button>
            </template>
            <template #icon="{row}">
                <Icon :name="row.icon"/>
            </template>
        </ProTable>
    </div>
</template>

<script setup lang="ts" name="menuManage">
import ProTable from '@/components/proTable/index.vue'
import { reactive } from 'vue';
import {ProTableType,Page} from '@/type/proTable'
import { initReactive } from '@/utils/utils';
import { useUserStore } from '@/store/user';
import Icon from '@/components/icon/index.vue'

const tableOptions = reactive<ProTableType>({
    labelWidth:'80px',
    columns:[
        {label:'名称',prop:'name',flex:"left",search:{el:'input'} },
        {label:'路径',prop:'path', search: { el: 'input' } },
        {label:'图标',prop:'icon',slot:true },
        {label:'创建日期',prop:'ctime',flex:"right",search:{el:'date',options:{type: "daterange", valueFormat: "YYYY-MM-DD"}}},
        {label:'操作',prop:'opt',slot:true,flex:'right',width:'100'},
    ]
})

const search = reactive({
    name:"",
    ctime:""
})

const userStore = useUserStore()
const {userInfo} = storeToRefs(userStore)

const tableData = computed(() => userInfo.value.menuList)


const handleSearch = () => {

}

const handleInit = () => {
    initReactive(search)
}

const handleRowClick = (val:any) => {

}

const handleSelect = (val:any) => {

}

</script>

<style scoped>

</style>